﻿<!DOCTYPE html>
<html>
	
    <head>
        <script>
        (function() {
    if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(
            document.createTextNode("@-ms-viewport{width:auto!important}")
        );
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
})();
</script>

        <title>App Framework Kitchen Sink</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />    
 
      <link rel="stylesheet" type="text/css" href="css/main.css"  />
      <link rel="stylesheet" type="text/css" href="css/appframework.css"  />
      <link rel="stylesheet" type="text/css" href="css/lists.css"  />
      <link rel="stylesheet" type="text/css" href="css/forms.css"  />
      <link rel="stylesheet" type="text/css" href="css/buttons.css"  />        
      <link rel="stylesheet" type="text/css" href="css/badges.css"  />        
      <link rel="stylesheet" type="text/css" href="css/grid.css"  />

      <link rel="stylesheet" type="text/css" href="css/myandroid.css"  />     
        
      <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css"  />
      <link rel="stylesheet" type="text/css" href="plugins/css/af.popup.css"  />
      <link rel="stylesheet" type="text/css" href="plugins/css/af.scroller.css"  />
      <link rel="stylesheet" type="text/css" href="plugins/css/af.selectBox.css"  />        
       
        <script type="text/javascript" charset="utf-8" src="./jquery2.1.js"></script>
        <script type="text/javascript" charset="utf-8" src="./jq.appframework.js"></script>
		
       
        <script>

            function loadedPanel(what) {
                //We are going to set the badge as the number of li elements inside the target
                $.ui.updateBadge("#aflink", $("#af").find("li").length);
            }


            function unloadedPanel(what) {
                console.log("unloaded " + what.id);
            }

            if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
                var script = document.createElement("script");
                script.src = "plugins/af.desktopBrowsers.js";
                var tag = $("head").append(script);
                //$.os.desktop=true;
            }

          //  $.feat.nativeTouchScroll=true;
          
        </script>        
        <script type="text/javascript" charset="utf-8" src="./plugins/af.actionsheet.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.passwordBox.js"></script>          
        <script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.selectBox.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.popup.js"></script>

        <script type="text/javascript" charset="utf-8" src="./ui/appframework.ui.js"></script>
        <!-- <script type="text/javascript" charset="utf-8" src="./ui/transitions/all.js"></script> -->
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/pop.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideRight.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>
        <script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>
        <script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>
        <script type="text/javascript" charset="utf-8" src="scrollbottom.js"></script>
        
        

        <script type="text/javascript">
            /* This function runs once the page is loaded, but intel.xdk is not yet active */
            //$.ui.animateHeaders=false;
           
            
			
			$.ui.ready(function(){
                    $("#afui").get(0).className='myandroid';
					
					//$.ui.loadContent("#bangdan_panel",false,false,"up");
            });
            // $.os.android=true;
            //$.ui.autoLaunch = false;
            $.ui.openLinksNewTab = false;
            $.ui.splitview=false;
			$.ui.slideSideMenu = false;
			$.ui.animateHeaders = false;
            $(document).ready(function(){
                  $.ui.launch();
            });     
			
			//设置选中
			function tabTopNav(e){	
				var li=document.getElementById('top_tab_ul').getElementsByTagName('li');	
				for (var i = 0; i <li.length; i++) {
					li[i].className = "";
				}				
				document.getElementById(e).className = "select";	
			}
			
			//panelload
		 	//推荐
		  	function load_tuijian_panel(){
				tabTopNav('tuijian_tab');
			}
			function  unload_tuijian_panel(){
				
			}
			//榜单
			function load_bangdan_panel(){
				tabTopNav('bangdan_tab');
				var bangdan_list='';
				$.jsonP({
					url: 'http://www.phonegap100.com/appapi.php?a=getThreadList&fid=2&page=1&callback=?',
					success: function(data) {
						
						var rel=data.result
						//panel				
						for (var i = 0; i < rel.length; i++) {
							bangdan_list+='<li><a href="#">'+rel[i].subject+'</a></li>';
						}
						$("#bangdan_list").html(bangdan_list);						
					}
				});	
				
			}
						
			
			function unload_bangdan_panel(){
				bangdanPage=2;  //unload的时候让 page回到第二页
			}
			
			//分类
            function load_fenlei_panel(){
				tabTopNav('fenlei_tab');
				
				var fenlei_list='';
				$.jsonP({
					url: 'http://www.phonegap100.com/appapi.php?a=getThreadList&fid=44&page=1&callback=?',
					success: function(data) {
						
						var rel=data.result
						//panel				
						for (var i = 0; i < rel.length; i++) {
							fenlei_list+='<li><a href="#">'+rel[i].subject+'</a></li>';
						}
						$("#fenlei_list").html(fenlei_list);						
					}
				});	
				
				
			}
			
			
			
			function unload_fenlei_panel(){
				fenleiPage=2;
			}			
			//我的
			function load_wode_panel(){
				tabTopNav('wode_tab');
			}
			function unload_wode_panel(){
				
			}		        
			
						
			
        </script>

</head>

    <body>
        <div id="afui" class="myandroid">
           
           
            <div id="content">
              <!-- UI  -->                     
                <div title='UI' id="tuijian_panel" class="panel" data-header="headerui" selected="true" data-load="load_tuijian_panel" data-unload="unload_tuijian_panel" data-tab="navbar_home">                   
                    <ul class="list mt10 showSide" id="tuijian_list">
                        <li>
                            <a href="index.html" data-ignore="true">App Framework theme</a>
                        </li>
                         <li>
                            <a href="index.html?ios" data-ignore="true">iOS theme</a>
                        </li>
                        <li>
                            <a href="index.html?android" data-ignore="true">Android theme</a>
                        </li>
                        <li>
                            <a href="index.html?win8" data-ignore="true">Win8 theme</a>
                        </li>
                       
                    </ul>
                </div>
                <!--List1--->
                 <div title='List1' id="bangdan_panel" class="panel" data-header="headerui" data-load="load_bangdan_panel" data-unload="unload_bangdan_panel">                   
                    <ul class="list mt10" id="bangdan_list">
                       
                       
                    </ul>
                </div>
                 <!--List2--->
                 <div title='List2' id="fenlei_panel" class="panel" data-header="headerui" data-load="load_fenlei_panel" data-unload="unload_fenlei_panel">                   
                    <ul class="list mt10" id="fenlei_list">
                       
                       
                    </ul>
                </div>
                 <!--我的--->
                 <div title='我的' id="wode_panel" class="panel" data-header="headerui" data-load="load_wode_panel" data-unload="unload_wode_panel">                   
                    <ul class="list mt10" id="wode_list">
                        <li class='red'>
                            <a href="#af" id='aflink' class='icon home big'>我的</a>
                        </li>
                        <li class="blue">
                            <a href="#afuidemo">我的</a>
                        </li>
                        <li>
                            <a href="index.html" data-ignore="true">我的</a>
                        </li>
                         <li>
                            <a href="index.html?ios" data-ignore="true">iOS theme</a>
                        </li>
                        <li>
                            <a href="index.html?android" data-ignore="true">Android theme</a>
                        </li>
                        <li>
                            <a href="index.html?win8" data-ignore="true">Win8 theme</a>
                        </li>
                       
                    </ul>
                </div> 
                
                
                <header id="headerui">
                   <div class="top_header">
                    <a onclick="af.ui.toggleSideMenu()" class="menuButton" style="float:left"></a>
                    <h1>phonegap_jsmobi</h1>
                   </div>
                     <div class="cate_top clearfix">
                    	<ul class="cate_top_ul clearfix" id="top_tab_ul">
                        	<li id="tuijian_tab" class="select"><a href="#tuijian_panel" data-transition="slideRight" class="">UI</a></li>
                            <li id="bangdan_tab"><a href="#bangdan_panel" class="">List1</a></li>
                            <li id="fenlei_tab"><a href="#fenlei_panel" class="">List2</a></li>
                            <li id="wode_tab"><a href="#wode_panel">我的</a></li>                           
                        </ul>                   
               		 </div>                       
                </header>
                
               
                <nav>
                    <ul class="list">                   
                        <li>
                            <a href="#af26">$.post()</a>
                        </li>
                        <li>
                            <a href="#af27">$.getJSON()</a>
                        </li>
                        <li>
                            <a href="#af28">$.param()</a>
                        </li>
                        <li>
                            <a href="#af29">$.parseJSON()</a>
                        </li>
                        <li>
                            <a href="#af30">$.os</a>
                        </li>
                    </ul>
                </nav>            
            
    		</div>          
        </div>
        <script>
        //推荐

              $('#tuijian_list').bind("swipeLeft", function() {				 
                $.ui.loadContent("#bangdan_panel", false, false, "slide");
              });

              //榜单
              $('#bangdan_list').bind("swipeLeft", function() {
                $.ui.loadContent("#fenlei_panel", false, false, "slide");
              })
              $('#bangdan_list').bind("swipeRight", function() {
                $.ui.loadContent("#tuijian_panel", false, true, "slideright");
              });
              //分类
              $('#fenlei_list').bind("swipeLeft", function() {
                $.ui.loadContent("#wode_panel", false, false, "slide");
              });
              $('#fenlei_list').bind("swipeRight", function() {
                $.ui.loadContent("#bangdan_panel", false, true, "slideright");
              });
              //我的
              $('#wode_list').bind("swipeRight", function() {
                $.ui.loadContent("#fenlei_panel", false, true, "slideright");
              });
			  
			
			  $('.showSide').bind("swipeRight", function() {
              	 af.ui.toggleSideMenu();
              });
        
        </script>
	
    </body>
</html>
